<template>
  <div id="scene3dRoot">
    <div class="container3d" id="worldContainer3D"></div>
    <div id="tools">
      <!--      <button id="addNodeBtn">增加</button>-->
      <!--      <button id="deleteNodeBtn">删除</button>-->
      <!--      <input id="boxSelectionBtn" type="checkbox"/><label for="boxSelectionBtn">框选</label>-->
    </div>
  </div>
</template>

<script>
import * as THREE from 'three'
import {DataManager} from '../../../../assets/layout/dataManager'

export default {
  components: {DataManager},
  data () {
    return {
      SceneData: {
        size:1
      }
    }
  }, mounted () {
    this.initThree()
  },
  methods: {
    //初始化场景
    async initThree () {
      const dataManager = new DataManager()
      window.dataManager = dataManager
      await dataManager.initGlobalData({
        // resId: projectId,
        // httpUrlBase,
        wsBaseHost: 'ws://192.168.5.96:10100/crystalAutolayout/ueye',
        scaleDatas: [ //比例尺数据
          {
            'unit': 'mm',//比例尺资源id
            'name': '1cm:1mm', //比例尺资源名称
            'value': 10
          },
          {
            'unit': 'μm',//比例尺资源id
            'name': '1cm:1mm', //比例尺资源名称
            'value': 100
          },
          {
            'unit': 'nm',//比例尺资源id
            'name': '1cm:1mm', //比例尺资源名称
            'value': 1000
          },
        ], // 比例尺
        coordData: 'bottom-left', // 当前坐标系
        currentScale: 'mm', // 当前比例尺
        viewMoveMinLength: 30, // 移动触发视口变换阈值
        wsIsNative: true, // 使用本地ws
        // 视图部分
        viewOptions: {
          type: '0',
          container: document.getElementById('worldContainer3D'),
          canvaSize: {
            width: window.innerWidth / 4 * 3,
            height: window.innerHeight / 4 * 3,
          },
          borderWidth: 50,
          tinyCubeSize: 150,
          viewPortSize: {
            width: 3000,
            height: 3000
          },
          backgroundColor: '#ffffff',
          markerColor: '#ff0000',
          markerSize: 10,
          selectedStyle: {
            '0': {//3d绘图
              nodeSBorderWidth: 1.5, //节点点击选中边框大小
              nodeSBorderColor: '#f8ff33',//节点选中边框颜色
              nodeSDBCBorderWidth: 1.5, //节点双击选中边框大小
              nodeDBCBorderColor: '#f8ff33',//节点双击选中边框颜色
              linkSColor: '#f8ff33',//连线点击选中颜色
              linkSWidth: 1.5,//连线点击选中大小
              linkDBCColor: '#f8ff33',//连线双击击选中颜色
              linkDBCWidth: 1.5,//连线双击选中大小
            },
            '1': {
              nodeSBorderWidth: 2, //节点点击选中边框大小
              nodeSBorderColor: '#ff00ff',//节点选中边框颜色
              nodeSDBCBorderWidth: 3, //节点双击选中边框大小
              nodeDBCBorderColor: '#71ff33',//节点双击选中边框颜色
              linkSColor: '#ff00ff',//连线点击选中颜色
              linkSWidth: 2,//连线点击选中大小
              linkDBCColor: '#71ff33',//连线双击击选中颜色
              linkDBCWidth: 3,//连线双击选中大小
            },
            '2': {
              nodeSBorderWidth: 2, //节点点击选中边框大小
              nodeSBorderColor: '#00ff00',//节点选中边框颜色
              nodeSDBCBorderWidth: 3, //节点双击选中边框大小
              nodeDBCBorderColor: '#00ff00',//节点双击选中边框颜色
              linkSColor: '#00ff00',//连线点击选中颜色
              linkSWidth: 2,//连线点击选中大小
              linkDBCColor: '#00ff00',//连线双击击选中颜色
              linkDBCWidth: 3,//连线双击选中大小
            }
          },
          boxSelectionStyle: {
            '0': {
              color: '#ff0000',
              width: 2
            },
            '1': {
              color: '#017fff',
              width: 1
            },
            '2': {
              color: '#017fff',
              width: 2
            }
          },
          alignLineStyle: {
            color: '#24e86e',
            width: 1,
          },
          errorLineStyle: {
            '0': {
              color: '#ff0000',
              width: 2
            },
            '1': {
              color: '#ff0000',
              width: 2
            },
            '2': {
              color: '#ff0000',
              width: 2
            }
          },
          // 未连线引脚样式
          pinOuterStyle: {
            color: '#222b7a',
            fontSize: 10
          },
        },
        // storeObject: storeObjectRes.data.data,
        chartEntry: {
          // 生成连线路径点
          generatePassPoints (fromPos, toPos, type) {
            const data = []
            const split1 = 0.2
            if (type === '3D') {
              data.push([fromPos[0], fromPos[1], 0])
              data.push([fromPos[0], fromPos[1] + (toPos[1] - fromPos[1]) * split1, 0])
              data.push([toPos[0], fromPos[1] + (toPos[1] - fromPos[1]) * split1, 0])
              data.push([toPos[0], toPos[1], 0])
            }
            if (type === '2D') {
              data.push([fromPos[0], fromPos[1], 0])
              data.push([fromPos[0], fromPos[1] + (toPos[1] - fromPos[1]) * split1, 0])
              data.push([toPos[0], fromPos[1] + (toPos[1] - fromPos[1]) * split1, 0])
              data.push([toPos[0], toPos[1], 0])
            }

            return data
          },
          // async callFunEntry (params) {
          //   const {cmd, data} = params
          //   let resData = null
          //   try {
          //     console.log('call chart entry')
          //     console.log(cmd, data)
          //     if (cmd === 'initViewLayout') {
          //       resData = await axios.post(`${httpUrlBase}/layout/initViewLayout`, {
          //         resId: projectId,
          //         coordAResId: 'bottom-left',
          //         scaleResId: 'mm',
          //         viewType: '0',
          //         viewWide: data.width,
          //         viewHigh: data.height,
          //       })
          //     }
          //     if (cmd === 'getViewLayoutDatas') {
          //       resData = await axios.post(`${httpUrlBase}/layout/getViewLayoutDatas`, {
          //         resId: projectId,
          //         coordAResId: 'bottom-left',
          //         scaleResId: 'mm',
          //         viewType: '0',
          //         viewWide: data.width,
          //         viewHigh: data.height,
          //         moveX: data.moveX,
          //         moveY: data.moveY,
          //         movelX: data.movelX,
          //         movelY: data.movelY,
          //         type: data.type
          //       })
          //     }
          //     if (cmd === 'dieCoordChange') {
          //       resData = await axios.post(`${httpUrlBase}/coord/dieCoordChange`, data)
          //     }
          //     if (cmd === 'dieRotate') {
          //       resData = await axios.post(`${httpUrlBase}/coord/dieRotate`, data)
          //     }
          //     if (cmd === 'delNode') {
          //       resData = await axios.post(`${httpUrlBase}/layout/delNode`, data)
          //     }
          //     if (cmd === 'batchDelNode') {
          //       resData = await axios.post(`${httpUrlBase}/layout/batchDelNodes`, data)
          //     }
          //     if (cmd === 'addLink') {
          //       resData = await axios.post(`${httpUrlBase}/link/addLink`, data)
          //     }
          //   } catch (error) {
          //
          //   }
          //   return resData.data.data
          // }
        },
        // 辅助函数
        utilFns: {
          // 计算拐点
          generatePassPoints: (fromPos, toPos) => {
            const data = []
            const split1 = 0.2
            data.push([fromPos[0], fromPos[2], 0])
            if (type === '3D') {
              // 固定Y轴，只在X轴/Z轴上移动
              data[0] = [fromPos[0], fromPos[1], fromPos[2] + (toPos[2] - fromPos[2]) * split1]
              data[1] = [toPos[0], fromPos[1], fromPos[2] + (toPos[2] - fromPos[2]) * split1]
            }
            if (type === '2D') {
              // 固定Y轴，只在X轴/Z轴上移动
              data[1] = [fromPos[0], fromPos[2] + (toPos[2] - fromPos[2]) * split1, 0]
              data[2] = [toPos[0], fromPos[2] + (toPos[2] - fromPos[2]) * split1, 0]
            }
            data.push([toPos[0], toPos[2], 0])
            return data
          }
        },
        // 操作参数
        operationOptions: {
          initPos: {
            camera: [0, 100, 1000],
            target: [0, 0, 0]
          },
          '3DZoom': {
            maxDistance: 2000,
            minDistance: 0,
            mouseZoomSpeed: 10
          },
          // 缩放
          zoom: {
            speed: 0.05,
            // 防抖间隔
            debouncingTime: 200,
            // 最小缩放尺度
            minDiffScale: 0.01,
            // 缩放边界
            viewTypeEdges: [0.3, 0.6],
            maxZoom: 10
          },
          // 平移
          pan: {
            // 防抖间隔
            debouncingTime: 2000,
            // 最小移动距离
            minDiffDistance: 0.1
          }
        },
        toolbarOptions: {
          // 基础配置
          base: {
            size: {
              width: 360,
              height: 40,
            },
            backgroundColor: 'rgba(100, 0, 0, 1)',
          },
          // 组配置
          groups: [
            {
              name: 'group1',
              children: [
                {
                  id: 'save',
                  name: '保存',
                  inputType: 'button',
                  icon: 'save',
                  status: 'enable',
                  enableViewTypes: ['0', '1'],
                  enableScales: ['mm', 'nm', 'μm']
                },
                {
                  id: 'revoke',
                  name: '撤销',
                  inputType: 'button',
                  icon: 'revoke',
                  status: 'enable'
                },
                {
                  id: 'redo',
                  name: '还原',
                  inputType: 'button',
                  icon: 'redo',
                  status: 'enable'
                }
              ]
            },
            {
              name: 'group2',
              children: [
                {
                  id: 'enlarge',
                  name: '放大',
                  inputType: 'select',
                  icon: 'enlarge',
                  status: 'enable'
                },
                {
                  id: 'shrink',
                  name: '缩小',
                  inputType: 'select',
                  icon: 'shrink',
                  status: 'enable'
                },
                {
                  id: 'center-display',
                  name: '剧中显示',
                  inputType: 'button',
                  icon: 'centerDisplay',
                  status: 'enable'
                },

                {
                  id: 'full-screen',
                  name: '全屏',
                  inputType: 'button',
                  icon: 'fullScreen',
                  status: 'enable'
                }
              ]
            },
            {
              name: 'group3',
              children: [
                {
                  id: 'select',
                  name: '选择',
                  inputType: 'select',
                  options: [
                    {
                      id: 'selection',
                      name: '选择',
                      status: 'enable',
                      parentId: 'select'
                    },
                    {
                      id: 'box-selection',
                      name: '框选',
                      status: 'enable',
                      parentId: 'select'
                    },
                    {
                      id: 'select-all',
                      name: '全选',
                      status: 'enable',
                      parentId: 'select'
                    }
                  ],
                  icon: 'select',
                  status: 'enable'
                },
                {
                  id: 'drag',
                  name: '拖动',
                  inputType: 'button',
                  icon: 'drag',
                  status: 'enable'
                },
                {
                  id: 'text',
                  name: '文本',
                  inputType: 'button',
                  icon: 'text',
                  status: 'enable',
                  enableViewTypes: ['1', '2'],
                  enableScales: ['mm', 'nm', 'μm']
                },
                {
                  id: 'connection',
                  name: '连线',
                  inputType: 'button',
                  icon: 'connection',
                  status: 'enable',
                  enableViewTypes: ['1', '2'],
                  enableScales: ['mm']
                },
                {
                  id: 'connection-symbol',
                  name: '引脚连线悬空符号',
                  inputType: 'button',
                  icon: 'connectionSymbol',
                  status: 'enable',
                  enableViewTypes: ['2'],
                  enableScales: ['nm', 'μm']
                },
              ]
            },
            {
              name: 'group4',
              children: [
                {
                  id: 'alignment',
                  name: '对齐',
                  inputType: 'select',
                  options: [
                    {
                      id: 'alignment-left',
                      name: '左对齐',
                      icon: 'alignmentLeft',
                      status: 'enable',
                      parentId: 'alignment'
                    },
                    {
                      id: 'vertical-center',
                      name: '垂直居中对齐',
                      icon: 'verticalCenter',
                      status: 'enable',
                      parentId: 'alignment'
                    },
                    {
                      id: 'alignment-right',
                      name: '右对齐',
                      icon: 'alignmentRight',
                      status: 'enable',
                      parentId: 'alignment'
                    },
                    {
                      id: 'alignment-top',
                      name: '顶对齐',
                      icon: 'alignmentTop',
                      status: 'enable',
                      parentId: 'alignment'
                    },
                    {
                      id: 'horizontally-center',
                      name: '水平居中对齐',
                      icon: 'horizontallyCenter',
                      status: 'enable',
                      parentId: 'alignment'
                    },
                    {
                      id: 'alignment-bottom',
                      name: '底对齐',
                      icon: 'alignmentBottom',
                      status: 'enable',
                      parentId: 'alignment'
                    },

                  ],
                  icon: 'alignment',
                  status: 'enable',
                  enableViewTypes: ['1', '2'],
                  enableScales: ['mm', 'nm', 'μm']
                },
                {
                  id: 'rotate',
                  name: '旋转',
                  inputType: 'select',
                  options: [
                    {
                      id: 'clockwise',
                      name: '顺时针旋转90°',
                      icon: 'clockwise',
                      status: 'enable',
                      parentId: 'rotate'
                    },
                    {
                      id: 'anticlockwise',
                      name: '逆时针旋转90°',
                      icon: 'anticlockwise',
                      status: 'enable',
                      parentId: 'rotate'
                    },
                  ],
                  icon: 'rotate',
                  status: 'enable',
                  enableViewTypes: ['1', '2'],
                  enableScales: ['mm', 'nm', 'μm']
                },
                {
                  id: 'auto-layout',
                  name: '自动布局',
                  inputType: 'button',
                  icon: 'autoLayout',
                  status: 'enable',
                  enableViewTypes: ['1', '2'],
                  enableScales: ['mm', 'nm', 'μm']
                },
                {
                  id: 'hidden',
                  name: '显示/隐藏',
                  inputType: 'button',
                  icon: 'hidden',
                  status: 'enable'
                },
              ]
            }
          ]
        }
      })
      const scene3dApp = dataManager.currentRenderApp

      window.scene3dApp = scene3dApp

      // dataManager.mapNetworkData(SceneDa
      // ta, 'ViewProjectData')
      scene3dApp.initSceneWithData(this.SceneData)

      // 启动场景App
      scene3dApp.start()
      // dataManager.addEventListener('renderAppReady', () => {
      //   axios.post(`${httpUrlBase}/layout/initViewLayout`, {
      //     resId: projectId,
      //     coordAResId: 'bottom-left',
      //     scaleResId: 'mm',
      //     viewType: '0',
      //     viewWide: 2000,
      //     viewHigh: 2000,
      //   })
      // })
      //   //场景
      //   var scene = new THREE.Scene()
      //
      //   // 透视相机(// 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面)
      //   var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 2000)
      //   // camera.position.z = 5//position：相机位置xyz坐标：200, 200, 200
      //   camera.position.set(10.0, -20, 13)
      //   camera.up.set(0, 0, 1)
      //   camera.lookAt(new THREE.Vector3(0, 0, 0))
      //
      //   // 渲染器
      //   var renderer = new THREE.WebGLRenderer()
      //   renderer.setSize(window.innerWidth, window.innerHeight)
      //   let dom = document.getElementById('worldContainer3D')
      //   dom.appendChild(renderer.domElement)//添加进页面
      //
      //   // AxesHelper：辅助观察的坐标系
      //   const axesHelper = new THREE.AxesHelper(150)
      //   scene.add(axesHelper)
      //
      //   //网格线绘制
      //   var grid = new THREE.GridHelper(24, 24, 0xFF0000, 0x444444)
      //   grid.material.opacity = 0.4
      //   grid.material.transparent = true
      //   grid.rotation.x = Math.PI / 2.0
      //   scene.add(grid)
      //
      //   // 材质
      //   const material = new THREE.MeshBasicMaterial({
      //     color: 0x0000ff, //设置材质颜色
      //     transparent: true,//开启透明
      //     opacity: 0.5,//设置透明度
      //   })
      //
      //   // 设置几何体长宽高，也就是x、y、z三个方向的尺寸
      //   //对比三个参数分别对应xyz轴哪个方向
      //   var geometry = new THREE.BoxGeometry(2, 2, 2)
      //
      //   //点光源：两个参数分别表示光源颜色和光照强度
      //   // 参数1：0xffffff是纯白光,表示光源颜色
      //   // 参数2：1.0,表示光照强度，可以根据需要调整
      //   const pointLight = new THREE.PointLight(0xffffff, 1.0)
      //   pointLight.decay = 0.0//设置光源不随距离衰减
      //   pointLight.position.set(400, 200, 300) //点光源放在x轴上
      //   scene.add(pointLight)
      //
      //   // 物体
      //   var cube = new THREE.Mesh(geometry, material)
      //   scene.add(cube)
      //
      //   function animate () {
      //     requestAnimationFrame(animate)
      //     cube.rotation.x += 0.01
      //     cube.rotation.y += 0.01
      //     renderer.render(scene, camera)
      //   }
      //
      //   animate()
    },
  },

}
</script>
<style lang="less">
.selectBox {
  border: 1px solid #55aaff;
  background-color: rgba(75, 160, 255, 0.3);
  position: fixed;
}
</style>
<style lang="less" scoped>
.container3d {
  width: 100%;
  height: 100%;
}

#tools {
  position: absolute;
  top: 0;
}
</style>


